<template>
    <div class="container order_list">
        <div class="fodder">
            <div class="left">
                <!-- fodder list -->
                <div class="fodder_list">

                    <div @click="itemClick(item, index)" class="fodder_item" :class="{ 'active': item.active }"
                        v-for="(item, index) in fodders" :key="index">
                        <div class="box">
                            <svg v-if="item.active" xmlns="http://www.w3.org/2000/svg" fill="#FFAE35"
                                viewBox="0 0 32 32" width="40" height="40">
                                <defs></defs>
                                <g>
                                    <path
                                        d="M27.424 26.976h-24.128c0.256-0.704 0.512-1.376 0.768-2.048 1.248-3.328 2.496-6.624 3.712-9.952 0.448-1.152 1.792-1.984 2.88-1.984 6.528 0.032 13.056 0.032 19.616 0 0.736 0 1.312 0.192 1.632 0.896 0.096 0.224 0.16 0.416 0 0.8-1.472 4.032-3.008 8.224-4.48 12.288zM10.048 5.024c0.032 0.096 0.032 0.192 0.096 0.288 0.127 0.159 0.694 1.293 1.248 2.434l0.448 1.022c0.096 0.192 0.224 0.256 0.448 0.256h13.696c0.928 0 1.76 0.672 1.92 1.632 0.032 0.096 0 0.224 0 0.352h-17.088c-1.92 0-3.456 0.832-4.48 2.496-0.352 0.544-0.544 1.216-0.768 1.856-1.184 3.104-2.336 6.208-3.52 9.344-0.096 0.224-0.192 0.288-0.448 0.224-0.768-0.192-1.536-0.8-1.6-1.504v-16.832c0-1.472 1.088-1.568 1.568-1.568h8.48z">
                                    </path>
                                </g>
                            </svg>
                            <svg v-else xmlns="http://www.w3.org/2000/svg" fill="#FFAE35"
                                class="styles__StyledSVGIconPathComponent-sc-4n1c4t-0 hhxktN svg-icon-path-icon fill"
                                viewBox="0 0 32 32" width="40" height="40">
                                <defs></defs>
                                <g>
                                    <path
                                        d="M28.352 7.872h-10.496l-0.512-1.088c-0.448-0.928-1.28-1.504-2.208-1.504h-11.456c-0.928 0-1.664 0.832-1.664 1.856v17.76c0 0.992 0.736 1.824 1.664 1.824h24.672c0.896 0 1.664-0.832 1.664-1.824v-15.2c0-0.992-0.768-1.824-1.664-1.824z">
                                    </path>
                                </g>
                            </svg>
                            <span>{{ item.groupName }}</span>
                        </div>
                        <div class="item_num">{{ item.num }}</div>
                    </div>
                </div>
                <!-- buttons -->
                <div class="buttons">
                    <div class="button" @click="addTemplate">
                        <el-icon>
                            <CirclePlus />
                        </el-icon>
                        <div>新增分组</div>
                    </div>
                    <div class="button" @click="editTemplate">
                        <el-icon>
                            <Edit />
                        </el-icon>
                        <div>编辑分组</div>
                    </div>
                    <div class="button" @click="delTemplate">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        <div>删除分组</div>
                    </div>
                </div>
            </div>
            <div class="right">
                <el-form ref="form" inline :model="queryParams" :rules="rules" label-width="80px"
                    @submit.native.prevent>
                    <el-form-item label="模板名称:" prop="pptName">
                        <el-input v-model="queryParams.pptName" @keyup.enter="handleQuery"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="handleQuery">搜索</el-button>
                        <el-button @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-card shadow="never" :body-style="{ padding: '20px' }">
                    <template #header>
                        <i class="el-icon-s-grid mr10"></i>
                        <span>PPT模板列表</span>
                        <div class="button-main">
                            <el-button type="primary" @click="handleAdd({})">新增模板</el-button>
                        </div>
                    </template>
                    <div class="main" v-if="dataSource.length">

                        <div v-for="(item, index) in dataSource" :key="index" class="table-item">
                            <!-- <img :src="item.pptTopImg" style="width: 150px;height: 150px;object-fit: cover;" alt=""> -->
                            <ImagePreview :width="248" :height="350" :src="item.pptTopImg"
                                :preview-src-list="[item.pptTopImg]" />
                            <div class="btns">
                                <!-- 查看 编辑 删除 -->
                                <el-checkbox v-model="item.checked" style="margin-right: 10px;"></el-checkbox>
                                <el-button type="text" @click="handleView(item)">查看</el-button>
                                <el-button type="text" @click="handleEdit(item)">编辑</el-button>
                                <el-button type="text" @click="handleDelete(item.id)">删除</el-button>
                            </div>
                        </div>
                    </div>
                    <el-empty v-else description="模板空空如也，赶紧设计个吧" />
                    <pagination v-show="total > 0" :total="total" v-model:page.sync="queryParams.pageNum"
                        v-model:limit.sync="queryParams.pageSize" @pagination="getList" />
                </el-card>
            </div>
        </div>
        <addForm ref="modelForm" @ok="getList" />
        <add-template-form ref="addTemplateForm" @ok="getGroupList"></add-template-form>
        <del-template-form ref="delTemplateForm" @ok="getGroupList"></del-template-form>
        <selectTemplate ref="selectTemplate" @ok="selectOk"></selectTemplate>
    </div>
</template>

<script>
import addForm from './modules/addForm.vue'
import listMixin from '@/mixins/listMixin';
import addTemplateForm from './modules/addTemplateForm.vue'
import delTemplateForm from './modules/delTemplateForm.vue'
import ImagePreview from '@/components/ImagePreview/index.vue';
import { listMaterialPptGroup } from '@/api/goods/materialPptGroup/index'
import selectTemplate from './modules/selectTemplate.vue'
export default {
    components: {
        addForm,
        addTemplateForm,
        delTemplateForm,
        ImagePreview,
        selectTemplate
    },
    mixins: [listMixin],
    data() {
        return {
            showSearch: true,
            queryParams: {
                orderNo: '',
                pageNum: 1,
                pageSize: 12
            },
            loading: false,
            dataSource: [],
            total: 0,
            multiple: false,
            currentIndex: -1,
            fodders: [],
            currentItem: {},
            urls: {
                list: '/order/materialPpt/list',
                delete: '/order/materialPpt',

            }
        }
    },
    mounted() {
        this.getGroupList();
    },
    watch: {
        fodders(newValue, oldValue) {
            this.currentIndex = newValue.findIndex(item => item.active)
        }
    },
    methods: {
        itemClick(item, index) {
            this.fodders.forEach((item) => {
                item.active = false

            })
            this.currentIndex = index
            this.currentItem = item
            this.fodders[index].active = !item.active
            this.queryParams.groupId = item.id
            this.getList()
        },
        handleSelectionChange(selection) {
            // Implement the logic for handling the selection change
        },
        selectHandle(row) {
            // Implement the logic for handling the selection status
        },
        handleEdit(row) {
            this.$refs.modelForm.edit(row)
        },
        handleView(row) {
            this.$router.push({ path: '/common/ppt', query: { id: row.id } })
        },
        addTemplate() {
            this.$refs.addTemplateForm.add()
        },
        editTemplate() {
            if (this.currentIndex === -1) {
                this.$modal.msgError('请选择分组')
                return
            }
            this.$refs.addTemplateForm.edit(this.fodders[this.currentIndex])
        },
        delTemplate() {
            this.$refs.delTemplateForm.show(this.currentIndex > -1 && this.fodders[this.currentIndex])
        },
        getGroupList() {
            listMaterialPptGroup().then(res => {
                if (res.code == 200) {
                    this.fodders = res.rows
                    let flag = false
                    this.fodders.forEach((item) => {
                        if (item.id === this.currentItem.id) {
                            item.active = true
                            flag = true
                        }
                    })
                    if (!flag) {
                        this.fodders[0].active = true
                        this.queryParams.groupId = this.fodders[0].id
                        this.getList()
                    }
                } else {
                    this.$modal.msgError(res.msg)
                }
            }).catch(err => {
                console.log('err :>> ', err);
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    padding: 30px;
    max-width: 100%;
}

.fodder {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .right {
        width: calc(100% - 240px);
        position: relative;
        margin-left: 20px;
    }
}

.left {
    width: 240px;
    height: calc(100vh - 147px);
    border: 1px solid #ccc;
    position: relative;
    z-index: 20;
    overflow: hidden;
    background-color:#fff;

    .fodder_list {
        .fodder_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            cursor: pointer;

            .box {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                svg {
                    margin-right: 10px;
                }
            }
        }

        .fodder_item.active,
        .fodder_item:hover {
            background-color: #f5f5f5;
        }
    }

    .buttons {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        position: absolute;
        bottom: 0;
        width: 240px;
        border-top: 1px solid #ccc;
        background-color: #fff;
        z-index: 21;
        font-size: 12px;
        color: #303133;

        .button {
            cursor: pointer;
            padding: 10px;
            text-align: center;

            i {
                margin-right: 5px;
            }
        }

        .button:not(:last-child) {
            border-right: 1px solid #ccc;
        }

        .button:hover {
            color: #409eff;
        }
    }
}

.main {
    height: calc(100vh - 300px);
    overflow-x: scroll;
}

.button-main {
    float: right;
    margin-top: -10px;
}

.table-item {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #e6ebf5;
    width: 250px;
}

.btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    background-color: #F9FAFC;
    margin-top: -4px;

    .el-button {
        padding: 0;
    }
}
</style>

<style type="text/css">
.order_list .el-card__header {
    background-color: #f5f7fa;
}
</style>